<template>
  <div class="app-container">
    <form-filter @on-filter="submitFilterForm" @on-export="exportHandle"/>
    <!--<div class="el-card-header">-->
    <!--<div class="total-wrap">-->
    <!--<strong>全部总额：</strong>-->
    <!--<span class="total-item" v-for="(item,index) in tradeTotal.all" :key="index">-->
    <!--{{item.label}}: {{item.value}}-->
    <!--</span>-->
    <!--</div>-->
    <!--<div class="total-wrap">-->
    <!--<strong>当前页统计：</strong>-->
    <!--<span class="total-item" v-for="(item,index) in tradeTotal.current" :key="index">-->
    <!--{{item.label}}: {{item.value}}-->
    <!--</span>-->
    <!--</div>-->
    <!--</div>-->
    <el-table :data="tableData.list" v-loading="loading" element-loading-text="加载中...">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="orderId" label="单号"></el-table-column>
      <el-table-column prop="orderType" label="类型">
         <template slot-scope="{row}">
          {{row.orderType | toConverter('AGENCY_ORDER_TYPE_DETAIL')}}{{row.orderType === 6 ? '人工(加币)' :''}}{{row.orderType === 7 ?
          '其他(减币)' :''}}
        </template>
      </el-table-column>
      <el-table-column  label="细分类型" prop="subType">
         <template slot-scope="{row}">
          {{ row.subType || '-'}}
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额">
        <template slot-scope="{row}">
          {{row.amount | currency}}
        </template>
      </el-table-column>
      <el-table-column prop="fee" label="手续费">
        <template slot-scope="{row}">
          {{row.fee | currency}}
        </template>
      </el-table-column>
      <el-table-column prop="reallyAmount" label="实际到账">
        <template slot-scope="{row}">
          {{row.reallyAmount | currency}}
        </template>
      </el-table-column>
      <el-table-column prop="orderDesc" label="操作动作">
        <template slot-scope="{row}">
          {{row.orderDesc}}
          <span v-if="row.remark">({{row.remark}})</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态">
         <template slot-scope="{row}">
          {{row.status | toConverter('REPORT_TRANSFER_STATUS')}}
        </template>
      </el-table-column>
      <el-table-column prop="lastUpdate" label="时间">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMemberTradeList, getMemberTradeListExport } from '@/services/api/member';
import formFilter from './formFilter';
import { grid } from '@/build';

export default {
  name: 'user-trade',
  components: { formFilter },
  props: {
    member: {
      type: Object,
    },
  },
  mixins: [grid],
  data() {
    // 本月时间本月1号至当前时间
    const monthTime = [moment().startOf('month').format('YYYY-MM-DD'), moment().format('YYYY-MM-DD')];

    return {
      tableData: {},
      filters: {
        // parentName: this.member.username,
        userId: this.$store.state.member.member_id,
        page: 1,
        size: 20,
        orderType: [2],
        startTime: moment(monthTime[0]).format('YYYY-MM-DD 00:00:00'),
        endTime: moment(monthTime[1]).format('YYYY-MM-DD 23:59:59'),
      },
    };
  },
  filters: {
    toSwitchStr(type) {
      let str = ';';
      // eslint-disable-next-line default-case
      switch (type) {
        case 3:
          str = '人工充值';
          break;
        case 4:
          str = '提现失败退回';
          break;
        case 5:
          str = '转账补分';
          break;
        case 6:
          str = '游戏补分-贝博体育';
          break;
        case 7:
          str = '游戏补分-LB彩票';
          break;
        case 8:
          str = '上分返利';
          break;
        case 9:
          str = '佣金调整';
          break;
        case 10:
          str = '系统扣回';
          break;
        case 11:
          str = '错误上分扣回';
          break;
        default:
          str = '-';
      }
      return str;
    },
  },
  methods: {
    exportHandle(formInline) {
      const {
        time, orderType, subType, status,
      } = formInline;
      let startTime;
      let endTime;
      if (!_.isUndefined(time) && _.isArray(time)) {
        startTime = time[0];
        endTime = time[1];
        formInline = { };
      } else {
        this.filters.startTime = undefined;
        this.filters.endTime = undefined;
      }
      const ajaxData = {
        startTime, endTime, orderType, subType, status,
      };
      const filename = '交易明细报表.csv';
      const header = ['序号', '交易单号', '类型', '细分类型', '金额', '手续费', '实际到账', '操作动作', '状态', '时间'];
      const filterField = ['index', 'orderId', 'orderType', 'subType', 'amount', 'fee', 'reallyAmount', 'orderDesc', 'status', 'createTime'];
      getMemberTradeListExport(ajaxData).then(([result, data]) => {
        if (result) {
          const exportData = this.responseFormatter(data.list);
          this.export2Excel(header, filterField, exportData, filename);
        } else {
          this.$message({ message: `导出失败,${data.message}`, type: 'warning' });
        }
      });
    },
    responseFormatter(data) {
      data.map((item, index) => {
        item.index = index + 1;
        item.orderId = item.orderId;
        item.orderType = _.toConverter(item.orderType, 'AGENCY_ORDER_TYPE_DETAIL') + (item.orderType === 6 ? '人工(加币)' : '') + (item.orderType === 7 ? '其他(减币)' : '');
        // item.subType = this.$options.filters.toSwitchStr(item.subType);
        item.subType = item.subType;
        item.amount = _.currency(item.amount);
        item.fee = _.currency(item.fee);
        item.reallyAmount = _.currency(item.reallyAmount);
        item.orderDesc += item.remark;
        item.status = _.toConverter(item.status, 'REPORT_TRANSFER_STATUS');
        item.createTime = _.toTime(item.createTime);
      });
      return data;
    },
  },

  mounted() {
    this.bindGet(getMemberTradeList, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
      beforeSend: (data) => {
        if (Number(data.orderType) === 11) {
          data.userId = undefined;
          data.parentName = this.member.username;
        } else {
          data.userId = this.$store.state.member.member_id;
          data.parentName = undefined;
        }
        delete data.time;
        return data;
      },
    });
    this.getAll();
  },
};
</script>

<style lang="scss" scoped>
  .el-card-header {
    padding-bottom: 20px;

    .total-wrap {
      padding: 5px;
      line-height: 2;

      strong {
        display: inline-block;
        text-align: right;
        width: 100px;
        font-size: 14px;
      }

      .total-item {
        font-size: 14px;
        padding: 0 5px;
        display: inline-block;
        min-width: 120px;
      }
    }
  }
</style>
